<template>
  <div id="companyOrganization" class="route-page">
    <a-card
        class="route-content"
        :tab-list="tabList"
        defaultActiveTabKey="member"
        :active-tab-key="tabKey"
        @tabChange="onTabChange"
        :class="{ 'in-member': tabKey == 'member' }"
    >
      <a-alert
          v-if="tabKey == 'member' && $store.getters.userInfo.level !== 99"
          message="组织架构展示数据时考虑到可见范围，只能查看自己所在部门以及所在部门以下的部门和成员"
          type="info"
      />
      <a-layout
          class="layout"
          v-if="tabKey == 'member'"
          :style="tabKey == 'member' ? { flex: 1, marginTop: '10px' } : ''"
          style="background: #fff"
      >
        <a-layout-sider class="sider" :width="240" style="background: #fff">
          <section class="search-box">
            <a-input-search
                v-model:value="treeSearchValue"
                placeholder="搜索成员或部门"
                @search="onTreeSearch"
                :allowClear="true"
                enter-button
            />
          </section>
          <!-- 搜索结果 -->
          <section class="result" v-if="showSearch">
            <!-- 成员 -->
            <template v-if="searchUserList.length">
              <div class="result-title">成员</div>
              <a-list class="result-list" :data-source="searchUserList">
                <template #renderItem="{ item }">
                  <a-list-item
                      class="list-item"
                      @click="memberEdit(item.uid, 'view')"
                  >
                    <template #actions>
                      <a-dropdown :trigger="['click']" @click.stop>
                        <div class="text-right" style="width: 40px">
                          <MoreOutlined/>
                        </div>
                        <template #overlay>
                          <a-menu>
                            <a-menu-item key="edit_member">
                              <a-button
                                  type="link"
                                  @click="memberEdit(item.uid, 'edit')"
                              >编辑成员
                              </a-button
                              >
                            </a-menu-item>
                          </a-menu>
                        </template>
                      </a-dropdown>
                    </template>
                    <a-list-item-meta :description="item.departmentLabel.label">
                      <template #title>
                        <span>{{ item.realname }}</span>
                      </template>
                      <template #avatar>
                        <a-avatar
                            v-if="item.avator"
                            size="middle"
                            key="has_avator"
                            :src="item.avatar"
                        />
                        <a-avatar size="middle" key="no_avator" v-else>
                          <template #icon>
                            <UserOutlined/>
                          </template>
                        </a-avatar>
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
            </template>
            <template v-if="searchDeptList.length">
              <!-- 部门 -->
              <div
                  class="result-title"
                  :class="searchUserList.length ? 'mt-10' : ''"
              >
                部门
              </div>
              <a-list class="result-list" :data-source="searchDeptList">
                <template #renderItem="{ item }">
                  <a-list-item
                      class="list-item"
                      @click="handleReslutDeptClick(item)"
                      :class="currentDepartment.id == item.id ? 'active' : ''"
                  >
                    <template #actions>
                      <a-dropdown :trigger="['click']" @click.stop>
                        <div class="text-right" style="width: 40px">
                          <MoreOutlined/>
                        </div>
                        <template #overlay>
                          <a-menu>
                            <a-menu-item
                                key="edit_apt"
                                v-if="topKey != item.id"
                            >
                              <a-button
                                  type="link"
                                  @click="editDepartment(item.id)"
                              >编辑部门
                              </a-button
                              >
                            </a-menu-item>
                            <a-menu-item key="add_apt">
                              <a-button
                                  type="link"
                                  @click="addSonDepartment(item.id)"
                              >添加子部门
                              </a-button
                              >
                            </a-menu-item>
                            <a-menu-item key="del_apt" v-if="topKey != item.id">
                              <a-button
                                  type="link"
                                  danger
                                  @click="delDepartment(item.id)"
                              >删除
                              </a-button
                              >
                            </a-menu-item>
                          </a-menu>
                        </template>
                      </a-dropdown>
                    </template>
                    <a-list-item-meta>
                      <template #title>
                        <span>{{ item.name }}</span>
                      </template>
                      <template #avatar>
                        <TeamOutlined
                            style="margin-left: 10px; font-size: 18px"
                        />
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
            </template>
            <Empty
                v-if="!searchUserList.length && !searchDeptList.length"
                :image="simpleImage"
                description="没有找到相关内容"
            />
          </section>
          <!-- 树 -->
          <template v-if="treeData.length && !showSearch">
            <a-tree
                class="tree"
                :tree-data="treeData"
                :show-line="true"
                :show-icon="true"
                :selectedKeys="treeSelectedKeys"
                :defaultExpandAll="true"
                :blockNode="true"
                @select="onTreeSelect"
            >
              <template #switcherIcon="{ switcherCls, dataRef }">
                <DownOutlined
                    :class="switcherCls"
                    style="color: #999; font-size: 12px"
                />
              </template>
              <template #icon="{ dataRef }">
                <template v-if="dataRef.isLeaf">
                  <TeamOutlined style="color: #999"/>
                </template>
              </template>
              <template #title="{ key: treeKey, title }">
                <div class="title">
                  <a-tooltip>
                    <template #title>{{ title }}</template>
                    <span
                        style="
                        display: inline-block;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >{{ title }}</span
                    >
                  </a-tooltip>
                  <a-dropdown :trigger="['click']" @click.stop>
                    <div class="text-right" style="width: 40px">
                      <MoreOutlined/>
                    </div>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="edit_apt" v-if="topKey != treeKey">
                          <a-button type="link" @click="editDepartment(treeKey)"
                          >编辑部门
                          </a-button
                          >
                        </a-menu-item>
                        <a-menu-item key="add_apt">
                          <a-button
                              type="link"
                              @click="addSonDepartment(treeKey)"
                          >添加子部门
                          </a-button
                          >
                        </a-menu-item>
                        <a-menu-item key="del_apt" v-if="topKey != treeKey">
                          <a-button
                              type="link"
                              danger
                              @click="delDepartment(treeKey)"
                          >删除
                          </a-button
                          >
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </template>
            </a-tree>
          </template>
          <div class="btns">
            <a-button @click="editDepartment()" type="primary" ghost>
              <template #icon>
                <PlusOutlined/>
              </template>
              新建部门
            </a-button>
            <a-button type="primary" ghost @click="manageDepartment">
              <template #icon>
                <ApartmentOutlined/>
              </template>
              管理部门
            </a-button>
          </div>
        </a-layout-sider>
        <a-layout-content class="content">
          <template v-if="currentDepartment">
            <a-row type="flex" class="table-header">
              <a-col flex="auto">
                <div class="table-title">
                  <span class="mr-10 fw-bold" style="color: #666"
                  >{{ currentDepartment.name }}
                  </span>
                  <TeamOutlined/>
                  <span>{{ currentDepartment.total }}</span>
                  <a-tooltip>
                    <template #title>包含子部门成员数</template>
                    <QuestionCircleOutlined class="ml-10"/>
                  </a-tooltip>
                </div>
              </a-col>
              <a-col
                  :flex="
                  $store.getters.userInfo.org_id == 1689 ? '600px' : '500px'
                "
                  class="text-right"
              >
                <a-button class="mr-20" type="primary" @click="memberAdd()">
                  <template #icon>
                    <UserAddOutlined/>
                  </template>
                  添加成员
                </a-button>
                <a-badge :count="$store.getters.uncheckCount" class="mr-20">
                  <a-button type="primary" @click="goMemberApplyList" ghost>
                    <template #icon>
                      <SolutionOutlined/>
                    </template>
                    申请人列表
                  </a-button>
                </a-badge>
                <a-dropdown
                    :class="$store.getters.userInfo.org_id == 1689 ? 'mr-20' : ''"
                >
                  <template #overlay>
                    <a-menu @click="btnUserImport">
                      <a-menu-item key="btnUserImport">成员导入</a-menu-item>
                    </a-menu>
                  </template>
                  <a-button>
                    更多
                    <DownOutlined/>
                  </a-button>
                </a-dropdown>
                <a-button v-if="$store.getters.userInfo.org_id == 1689"
                >
                  <template #icon>
                    <DownloadOutlined/>
                  </template>
                  数据导出
                </a-button
                >
              </a-col>
            </a-row>
            <a-table
                class="mt-10"
                :dataSource="personList"
                :row-selection="memberRowSelection"
                :columns="columns"
                row-key="uid"
                :loading="loading"
                :pagination="pagination"
                @change="handleTableChange"
                :scroll="{ x: 'max-content' }"
            >
              <template #title>
                <a-row type="flex">
                  <a-col flex="auto">
                    <span>状态：</span>
                    <template v-for="tag of statusList" :key="tag.key">
                      <checkable-tag
                          :checked="checkedStatus == tag.key"
                          @change="handleStatusChange(tag)"
                      >{{ tag.title }}
                      </checkable-tag
                      >
                    </template>
                  </a-col>
                  <a-col flex="50px" class="text-right">
                    <a-dropdown
                        :trigger="['click']"
                        v-model:visible="colVisible"
                        @visibleChange="handleColVisibleChange"
                    >
                      <InsertRowAboveOutlined
                          style="font-size: 18px; cursor: pointer"
                          title="自定义列显示"
                      />
                      <template #overlay>
                        <a-menu>
                          <a-menu-item key="reset" @click="resetColumns">
                            <a-button type="link">{{
                                $t("恢复默认")
                              }}
                            </a-button>
                          </a-menu-item>
                          <!-- <a-menu-divider /> -->
                          <a-menu-item key="checkall">
                            <a-checkbox
                                v-model:checked="colCheckAll"
                                @change="onCheckAllChange"
                            >
                              全部
                            </a-checkbox>
                          </a-menu-item>
                          <a-menu-item
                              v-for="item of columnsData"
                              :key="item.key"
                          >
                            <a-checkbox
                                v-model:checked="item.checked"
                                :disabled="item.disabled"
                                @change="onCheckItemChange"
                            >
                              {{ item.title }}
                            </a-checkbox>
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </a-col>
                </a-row>
              </template>
              <template #footer>
                <div class="flex aligen-center">
                  <a-switch
                      v-model:checked="showDirectMember"
                      :checkedValue="1"
                      :unCheckedValue="0"
                  />
                  <span class="ml-10">仅展示部门的直属成员</span>
                </div>
              </template>
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'status'">
                  <a-badge v-if="text == 3" status="warning" text="未激活"/>
                  <a-badge v-if="text == 1" status="success" text="正常"/>
                  <a-badge v-if="text == 9" status="error" text="暂停"/>
                  <span v-if="text == 3">
                    <a-tooltip>
                      <template #title>使用手机号登录将自动激活</template>
                      <QuestionCircleOutlined class="ml-10"/>
                    </a-tooltip>
                  </span>
                </template>
                <template v-if="column.key === 'gender'">
                  <span v-if="text == 1">{{ $t("男") }}</span>
                  <span v-else-if="text == 2">{{ $t("女") }}</span>
                  <span v-else>{{ $t("未知") }}</span>
                </template>
                <template v-if="column.key === 'departmentLabel'">
                  <a-tooltip>
                    <template #title>
                      <div v-for="(item, index) of text.labelTips" :key="index">
                        {{ index + 1 }}、{{ item }}
                      </div>
                    </template>
                    <span> {{ text.label }}</span>
                  </a-tooltip>
                </template>
                <template v-if="column.key === 'action'">
                  <a-button
                      type="link"
                      v-if="record?.operate.includes('detail')"
                      @click="
                      memberEdit(text, 'view', record?.operate.includes('edit'))
                    "
                  >详情
                  </a-button
                  >

                  <a-popover trigger="focus" placement="bottom">
                    <template #content>
                      <div>
                        <a-button
                            type="link"
                            v-if="record?.operate.includes('edit')"
                            @click="memberEdit(text, 'edit')"
                        >编辑
                        </a-button
                        >
                      </div>
                      <div>
                        <a-button
                            type="link"
                            @click="buildingAuthEdit(text)"
                            v-if="record?.operate.includes('auth')"
                        >
                          楼宇权限
                        </a-button>
                      </div>
                      <div>
                        <a-button type="link" v-if="record?.operate.includes('transfer')" @click="memberDel(text , 2)" >转移资源</a-button >
                      </div>
                      <div>
                        <a-button v-if=" (record.status == 1 || record.status == 9) && record?.operate.includes('dismiss') "
                            type="link" @click="controlAccount(record)" >
                          {{ record.status == 1 ? "暂停账号" : "恢复账号" }}
                        </a-button >
                      </div>
                      <div>
                        <a-button type="link" v-if="record?.operate.includes('dismiss')" danger @click="memberDel(text , 1)" >操作离职</a-button >
                      </div>
                      <div>
                        <a-button
                            type="link"
                            v-if="$store.getters.userInfo.org_id == 1689"
                            danger
                        >重置密码
                        </a-button
                        >
                      </div>
                    </template>
                    <a-button type="link">
                      <ellipsis-outlined
                          v-if="
                          ((record.status == 1 || record.status == 9) &&
                            record?.operate.includes('dismiss')) ||
                          record?.operate.includes('dismiss') ||
                          record?.operate.includes('auth') ||
                          record?.operate.includes('edit')
                        "
                      />
                    </a-button>
                  </a-popover>
                </template>
              </template>
            </a-table>
          </template>
        </a-layout-content>
      </a-layout>
      <section class="department" v-if="tabKey == 'department'">
        <a-row type="flex" class="w-100p">
          <a-col flex="200px">
            <a-input-search
                class="search"
                v-model:value="deptSearchValue"
                placeholder="搜索部门名"
                @search="onDepartmentSearch"
                :allowClear="true"
                enter-button
            />
          </a-col>
          <a-col flex="auto" class="text-right">
            <a-button @click="editDepartment()" type="primary" class="mr-10">
              新建部门
            </a-button>
            <a-button @click="delDepartment()" type="primary" danger>
              批量删除部门
            </a-button>
          </a-col>
        </a-row>
        <a-table
            :columns="departmentColumns"
            :data-source="renderDeptList"
            :row-selection="departmentRowSelection"
            :pagination="false"
            rowKey="id"
            class="mt-20"
        >
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'type'">
              {{ getRecordType(text) }}
            </template>
            <template v-if="column.key === 'leader'">
              {{ text ? text.realname : "--" }}
            </template>
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="editDepartment(text)"
              >编辑
              </a-button
              >
              <a-button type="link" @click="addSonDepartment(text)">
                添加子部门
              </a-button>
              <a-button type="link" danger @click="delDepartment(text)">
                删除
              </a-button>
            </template>
          </template>
        </a-table>
      </section>
      <a-layout
          class="layout"
          v-if="tabKey == 'posts'"
          style="background: #fff"
      >
        <template v-if="treeDataPosts.length">
          <a-layout-sider class="sider" :width="240" style="background: #fff">
            <a-tree
                class="tree noSearch"
                :tree-data="treeDataPosts"
                :show-line="true"
                :show-icon="true"
                :defaultExpandAll="true"
                :selectedKeys="treeSelectedKeysPosts"
                @select="onTreeSelectPosts"
                :fieldNames="{ title: 'name' }"
                :blockNode="true"
            >
              <template #switcherIcon="{ switcherCls, dataRef }">
                <DownOutlined
                    :class="switcherCls"
                    style="color: #999; font-size: 12px"
                />
              </template>
              <template #icon="{ dataRef }">
                <template v-if="dataRef.isLeaf">
                  <UserOutlined style="color: #999"/>
                </template>
              </template>
              <template #title="{ name, parent_id, id }">
                <div class="title">
                  <a-tooltip>
                    <template #title>{{ name }}</template>
                    <span
                        style="
                        display: inline-block;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >{{ name }}</span
                    >
                  </a-tooltip>

                  <a-dropdown :trigger="['click']" @click.stop>
                    <div class="text-right" style="width: 40px">
                      <MoreOutlined/>
                    </div>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="edit_apt">
                          <a-button
                              type="link"
                              @click="
                              parent_id == 0
                                ? addPostsGroup(id, name)
                                : addPosts(id)
                            "
                          >
                            编辑
                          </a-button>
                        </a-menu-item>
                        <a-menu-item key="del_apt">
                          <a-button
                              type="link"
                              danger
                              @click="delPostGroup(id, name, parent_id)"
                          >{{
                              parent_id == 0 ? "删除岗位组" : "删除岗位"
                            }}
                          </a-button
                          >
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </template>
            </a-tree>
            <div class="btns" v-if="treeDataPosts.length">
              <a-button type="primary" ghost @click="addPostsGroup()">
                <template #icon>
                  <PlusOutlined/>
                </template>
                新建岗位组
              </a-button>
              <a-button type="primary" ghost @click="addPosts()">
                <template #icon>
                  <ApartmentOutlined/>
                </template>
                新建岗位
              </a-button>
            </div>
          </a-layout-sider>
          <a-layout-content class="content">
            <a-row type="flex" class="table-header">
              <a-col flex="auto">
                <div class="table-title">
                  <span class="mr-10 fw-bold" style="color: #666">
                    <span v-if="currentPost">
                      {{
                        currentPost.parent_id == 0 ? postName : currentPost.name
                      }}
                    </span>
                    <span v-else>未选中岗位/岗位组</span>
                  </span>
                  <TeamOutlined/>
                  <span>{{ userSum }}</span>
                  <a-tooltip>
                    <template #title>岗位下的所有人数</template>
                    <QuestionCircleOutlined class="ml-10"/>
                  </a-tooltip>
                </div>
              </a-col>
              <a-col flex="400px" class="text-right">
                <!-- 只有当选择岗位的时候才展示此按钮 -->
                <a-button
                    class="mr-20"
                    type="primary"
                    @click="addMembers"
                    v-if="isShowAddbtn"
                >
                  <template #icon>
                    <UserAddOutlined/>
                  </template>
                  添加成员
                </a-button>
                <a-button
                    :disabled="isRemove"
                    class="mr-20"
                    type="primary"
                    danger
                    @click="removePeople"
                >
                  <template #icon>
                    <UserAddOutlined/>
                  </template>
                  移除成员
                </a-button>
              </a-col>
            </a-row>
            <!-- {{ treeDataPosts }}//定位 -->
            <a-table
                class="mt-10"
                :dataSource="dataSourcePosts"
                :row-selection="memberRowSelectionPosts"
                :columns="columsPosts"
                row-key="uid"
                :loading="loading"
                :pagination="paginationPosts"
                @change="handleTableChangePosts"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'sex'">
                  <span v-if="text == 1">{{ $t("男") }}</span>
                  <span v-else-if="text == 2">{{ $t("女") }}</span>
                  <span v-else>{{ $t("未知") }}</span>
                </template>
                <template v-if="column.key === 'position'">
                  <span>
                    {{ text ? text : "未录入" }}
                  </span>
                </template>
                <template v-if="column.key === 'actions'">
                  <a-button type="link" @click="removePeople(text)"
                  >移除
                  </a-button
                  >
                </template>
              </template>
            </a-table>
          </a-layout-content>
        </template>
        <div class="empty" style="width: 100%; height: 100%" v-else>
          <div class="emptyContent">
            <div style="width: 30%; margin-right: 40px">
              <div class="emptyTitle-h1">岗位管理</div>
              <div class="emptyTitle-h3">岗位是什么？</div>
              <div class="emptyTitle-context">
                岗位是绑定员工的一个设置，当成员绑定岗位后，就可以接收到分配给该岗位的执勤任务，比如巡检、客服等，从而实现在新成员入职时快捷安排任务，减轻管控负担。
              </div>
              <div class="emptyTitle-h3">岗位组是什么？</div>
              <div class="emptyTitle-context">
                岗位组作为岗位的上级，可用于统一管理组内的岗位，清晰岗位的权责；例：维修员岗位组下，设置空调维修岗位。
              </div>
              <a-button type="primary" @click="addPostsGroup()">
                <template #icon>
                  <PlusOutlined/>
                </template>
                新建岗位组
              </a-button>
            </div>
            <div style="width: 30%">
              <img
                  :src="$utils.staticPath + 'images/org_common/empty.png'"
                  alt=""
                  style="width: 400px; height: 300px"
              />
            </div>
          </div>
        </div>
      </a-layout>
      <!-- 编辑部门 -->
      <EditDepartment
          :visible="departmentEditVisible"
          :id="editDeptId"
          :parentId="deptParentId"
          @closeEdit="closeDepartmentEdit"
          @success="editSuccess('department')"
      />
      <!-- 新增成员 -->
      <AddMember
          :visible="memberAddVisible"
          @closeAdd="memberAddVisible = false"
          @success="editSuccess('addMember')"
      />
      <!-- 编辑成员 -->
      <EditMember
          :visible="memberEditVisible"
          :id="memberEditUid"
          :type="memberEditType"
          :can-edit="memberEditAuth"
          @closeEdit="closeMemberEdit"
          @success="editSuccess('member')"
      />
      <!-- 编辑权限 -->
      <EditBuildingAuth
          :visible="buildingAuthVisible"
          :id="memberEditUid"
          :depId="currentDepartment ? currentDepartment.id : 0"
          @cancel="closeBuildingAuth"
      />
      <!-- 编辑岗位 -->
      <EditPosts
          :id="postsId"
          :currentPostsGroup="currentPost"
          :position="position"
          :visible="postsVisible"
          @cancel="closePosts"
      />
      <!-- 编辑岗位组 -->
      <EditPostsGroup
          :id="postsGroupId"
          :val="postsGroupVal"
          :visible="postsGroupVisible"
          @cancel="closePostsGroup"
      />
      <!-- 岗位添加成员 -->
      <ChooseOrgMember
          @request="$utils.commonRequest"
          :visible="addMemberVisible"
          :deptDisabled="true"
          :uids="selectedUids"
          @close="handleAddMemberClose"
          @success="handleAddMemberSuccess"
      />
    </a-card>

    <!-- 成员导入 -->
    <Import
        :visible="visibleImport"
        @success="importSuccess"
        @cancelBtn="visibleImport = false"
    />

    <!-- 成员导入结果 -->
    <ImportResult
        :visible="userResultVisible"
        :result="importUserResult"
        @cancelBtn="userResultVisible = false"
    />

<!--    1.操作离职  2.转移资源-->
    <Resignation
        v-if="leaveoffice"
        :visible="leaveoffice"
        :id="EmployeeID"
        :type="Operationtype"
        :department_id="currentDepartment.id"
        @closerefurbish="closerefurbish"
    />
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  nextTick,
  onActivated,
  onMounted,
  ref,
  watch,
} from "vue";
import {
  PlusOutlined,
  ApartmentOutlined,
  TeamOutlined,
  DownOutlined,
  UserAddOutlined,
  SolutionOutlined,
  UserDeleteOutlined,
  InsertRowAboveOutlined,
  MoreOutlined,
  UserOutlined,
  QuestionCircleOutlined,
  DownloadOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import {CheckableTag, message, Modal, Empty} from "ant-design-vue";
import {ChooseOrgMember} from "bl-common-vue3";
import request from "../../../common/utils/request";
import EditDepartment from "./modules/EditDepartment.vue";
import EditMember from "./modules/EditMember.vue";
import EditBuildingAuth from "./modules/EditBuildingAuth.vue";
import EditPosts from "./modules/EditPosts.vue";
import EditPostsGroup from "./modules/EditPostsGroup.vue";
import store from "../../../store";
import {useRouter} from "vue-router";
import utils from "../../../common/utils/utils";
import utilsPosts from "./utils/utils";
import dict from "../../../common/utils/dict";
import AddMember from "./modules/AddMember.vue";
import Import from "@/views/setting/DepartmentUser/modules/Import.vue";
import ImportResult from "@/views/setting/DepartmentUser/modules/ImportResult.vue";
import Resignation from "@/views/setting/DepartmentUser/modules/Resignation.vue";

export default defineComponent({
  name: "companyDepartmentUser",
  components: {
    DownloadOutlined,
    PlusOutlined,
    ApartmentOutlined,
    DownOutlined,
    TeamOutlined,
    EditDepartment,
    EditMember,
    UserAddOutlined,
    SolutionOutlined,
    UserDeleteOutlined,
    CheckableTag,
    InsertRowAboveOutlined,
    MoreOutlined,
    UserOutlined,
    Empty,
    QuestionCircleOutlined,
    EditBuildingAuth,
    EditPosts,
    EditPostsGroup,
    ChooseOrgMember,
    AddMember,
    Import,
    ImportResult,
    EllipsisOutlined,
    Resignation,
  },
  setup() {
    const $router = useRouter();
    /**
     * @description: tab栏
     */

    const tabKey = ref("member");

    const onTabChange = (key) => {
      tabKey.value = key;
    };

    /**
     * @description: 左侧树
     */
    const topKey = computed(() => store.getters.departmentTopKey);
    // 搜素
    const showSearch = ref(false); //是否显示树
    const treeSearchValue = ref("");
    const searchUserList = ref([]); // 搜索结果-成员
    const searchDeptList = ref([]); // 搜索结果-部门
    const onTreeSearch = () => {
      if (treeSearchValue.value) {
        request
            .get("/org", "/department/search", {
              type: "all",
              keyword: treeSearchValue.value,
            })
            .then((res) => {
              showSearch.value = true;
              searchUserList.value = res.userData;
              searchDeptList.value = res.departmentData;
            });
      } else {
        showSearch.value = false;
        searchUserList.value = [];
        searchDeptList.value = [];
      }
    };
    watch(treeSearchValue, (val) => {
      if (!val) {
        showSearch.value = false;
      }
    });
    const handleReslutDeptClick = (item) => {
      treeSelectedKeys.value = [item.id];
      currentDepartment.value = item;
      initPersonList();
    };
    // 树
    const treeSelectedKeys = ref([]);
    const treeData = ref([]);
    const currentDepartment = ref(); // 当前选中节点
    // 选择节点
    const onTreeSelect = (keys, e) => {
      if (keys.length) {
        // 不能取消选中
        treeSelectedKeys.value = keys;
        currentDepartment.value = e.node.dataRef;
        initPersonList();
      }
    };
    // 获取部门树
    const getDepartmentData = () => {
      store.dispatch("SetDepartmentMember", {withUser: 0}).then((res) => {
        treeData.value = res;
        console.log("treeData.value", treeData.value);
        nextTick(() => {
          if (res.length) {
            if (!currentDepartment.value) {
              treeSelectedKeys.value = [res[0].id];
              currentDepartment.value = res[0];
            }
            getPersonList();
          }
        });
      });
    };
    // 编辑树
    const departmentEditVisible = ref(false);
    const editDeptId = ref(0);
    const editDepartment = (id) => {
      editDeptId.value = id || 0;
      departmentEditVisible.value = true;
    };
    const closeDepartmentEdit = () => {
      departmentEditVisible.value = false;
      editDeptId.value = 0;
      deptParentId.value = 0;
    };
    const deptParentId = ref(0);
    const addSonDepartment = (pId) => {
      deptParentId.value = pId || 0;
      departmentEditVisible.value = true;
    };
    const delDepartment = (id) => {
      let currentDepartment = null;
      let hasMember = false;
      if (id) {
        // 单项删除
        currentDepartment = utils.getDepartmentById(
            id,
            store.getters.departmentList
        );
        hasMember = Number(currentDepartment.total) > 0; // 是否还有成员未移除
      } else {
        if (deptSelectedRows.value.length) {
          // 部门批量删除
          const index = deptSelectedRows.value.findIndex(
              (item) => Number(item.total) > 0
          );
          hasMember = index > -1;
        } else {
          message.warn("请选择要删除的部门！");
          return;
        }
      }
      let content = "";
      if (
          currentDepartment &&
          currentDepartment.children &&
          currentDepartment.children.length
      ) {
        content = "请先删除所有子部门再进行删除部门操作";
      }
      if (hasMember) {
        content = "请先移除部门内所有人员再进行删除部门操作";
      }
      if (content) {
        Modal.warning({
          title: () => "确认删除部门",
          content: () => content,
          okText: "好的",
          centered: true,
        });
        return;
      }

      utils.modalConfirm({
        title: "确认删除",
        content: "注意部门删除后将不可恢复！",
        okType: "danger",
        centered: true,
        onOk: () => {
          request
              .del("org", "/department/index", {
                id: id ? id : deptSelectedKeys.value.join(","),
                needMsg: true,
              })
              .then((res) => {
                message.success(res.msg || "操作成功!");
                getDepartmentData();
              });
        },
      });
    };
    const manageDepartment = () => {
      onTabChange("department");
    };
    /**
     * @description:操作栏
     */
        // 跳转申请列表
    const goMemberApplyList = () => {
          $router.push({name: "memberApplyList"});
        };
    // 状态筛选
    const checkedStatus = ref(4);
    const handleStatusChange = (tag) => {
      checkedStatus.value = tag.key;
      initPersonList();
    };

    /**
     * @description:右侧表
     */
        // 表格
    const columns = ref([]);
    const actionCol = {
      title: "操作",
      dataIndex: "uid",
      key: "action",
      fixed: "right",
      width: 120,
    };
    const personList = ref([]);
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const loading = ref(false);
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
    };

    watch([page, limit], () => {
      getPersonList();
    });
    const showDirectMember = ref(0); // 是否是直属成员
    const getPersonList = () => {
      loading.value = true;
      request
          .get("/org", "/department/userList", {
            id: currentDepartment.value.id,
            page: page.value,
            limit: limit.value,
            status: checkedStatus.value,
            is_direct_member: showDirectMember.value,
          })
          .then((res) => {
            personList.value = res.list;
            total.value = Number(res.total);
          })
          .finally(() => {
            loading.value = false;
          });
    };
    watch(showDirectMember, (val) => {
      initPersonList();
    });
    const memberSelectedKeys = ref();
    const memberRowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        memberSelectedKeys.value = selectedRowKeys;
      },
      getCheckboxProps: (record) => ({
        disabled: record.uid == store.getters.userInfo.admin_uid,
        name: record.name,
      }),
    };

    /**
     * @description: 编辑成员
     */
    const memberEditVisible = ref(false);
    const memberEditType = ref(""); // view edit
    const memberEditUid = ref(0);
    const memberEditAuth = ref(true);

    /**
     * @description: 添加成员
     */
    const memberAddVisible = ref(false);
    const memberAdd = () => {
      memberAddVisible.value = true;
    };
    const memberEdit = (uid, type, canEdit) => {
      memberEditUid.value = uid || 0;
      memberEditType.value = type || "";
      memberEditAuth.value = canEdit ? true : false;
      memberEditVisible.value = true;
    };
    // 控制成员是否恢复暂停账号
    const controlAccount = (record) => {
      utils.modalConfirm({
        content: `确定要${record.status == 1 ? "暂停账号" : "恢复账号"}吗？`,
        okType: "danger",
        centered: true,
        onOk: () => {
          request
              .put("/org", "/department/user/status", {uid: record.uid})
              .then((res) => {
                message.success("操作成功");
                getPersonList();
              });
        },
      });
    };
    const closeMemberEdit = () => {
      memberEditVisible.value = false;
      memberEditType.value = "";
      memberEditAuth.value = true;
      memberEditUid.value = 0;
    };

    const leaveoffice = ref(false); //是否显示树
    const EmployeeID  = ref(0);
    const Operationtype  = ref(1);

    const memberDel = (id , type) => {
      leaveoffice.value = true
      EmployeeID.value = id
      Operationtype.value = type
    };

    const closerefurbish = (type) => {
      leaveoffice.value = false
      if(type == 'ok'){
        getDepartmentData();
      }
    }
    
    /**
     * @description: 保存数据成功后的回调
     */
    const editSuccess = (type = "department") => {
      if (type === "department") {
        closeDepartmentEdit();
      }
      if (type === "member") {
        closeMemberEdit();
      }
      if (type === "addMember") {
        memberAddVisible.value = false;
      }
      getDepartmentData();
    };

    /**
     * @description: 权限
     */
    const buildingAuthVisible = ref(false);
    const closeBuildingAuth = () => {
      buildingAuthVisible.value = false;
      memberEditUid.value = 0;
    };
    const buildingAuthEdit = (uid) => {
      memberEditUid.value = uid || 0;
      buildingAuthVisible.value = true;
    };

    /**
     * @description: 获取列筛选项
     */
    const columnsData = ref([]);
    const getColumnsData = (type) => {
      let params = {};
      if (type) {
        params.type = type;
      }
      request
          .get("/org", "/departmentUser/getListColumn", params)
          .then((res) => {
            columnsData.value = res.list;
            getColumns();
          });
    };
    const getColumns = () => {
      let arr = [];
      let checkall = true;
      columnsData.value.forEach((item) => {
        if (item.checked) {
          let col = {
            title: item.title,
            dataIndex: item.key,
            width: 200,
            align: "center",
          };
          if (["realname", "status", "departmentLabel"].includes(item.key)) {
            col.width = 160;
          }
          if (['job_number'].includes(item.key)) {
            col.width = 100;
          }
          if (['phone'].includes(item.key)) {
            col.width = 100;
          }
          if (["status", "departmentLabel", "gender"].includes(item.key)) {
            col.key = item.key;
          }
          arr.push(col);
        } else if (checkall) {
          checkall = false;
        }
      });
      colCheckAll.value = checkall;
      columns.value = [...arr, actionCol];
    };
    // 下拉显隐
    const colVisible = ref(false);
    const handleColVisibleChange = (visiable) => {
      if (visiable == false) {
        // 调取接口存住选项
        getColumns();
        request
            .post("org", "/user/specialSetting", {
              type: dict.USER_LIST_COL_SET,
              content: JSON.stringify(columnsData.value),
            })
            .then(() => {
            });
      }
    };
    const resetColumns = () => {
      getColumnsData(COL_RESET_TYPE);
      colVisible.value = false;
    };
    // 监听全部选中
    const colCheckAll = ref(false);
    const onCheckAllChange = (e) => {
      const {checked} = e.target;
      colCheckAll.value = checked;
      columnsData.value.forEach((item) => {
        if (!item.disabled) {
          item.checked = checked;
        }
      });
    };
    // 监听选中
    const onCheckItemChange = (e) => {
      const {checked} = e.target;
      if (checked && columnsDataCheckAll()) {
        colCheckAll.value = true;
      } else {
        colCheckAll.value = false;
      }
    };
    // 是否全选
    const columnsDataCheckAll = () => {
      for (let i in columnsData.value) {
        if (!columnsData.value[i].checked) {
          return false;
        }
      }
      return true;
    };

    /**
     * @description: 部门列表
     */
    const departmentList = ref([]);
    const renderDeptList = ref([]);

    watch(treeData, (val) => {
      departmentList.value = renderDeptList.value = val[0].children;
    });

    const deptSearchValue = ref("");
    const onDepartmentSearch = () => {
      if (deptSearchValue.value) {
        let list = [];
        utils.getDepartmentByName(
            deptSearchValue.value,
            departmentList.value,
            list
        );
        renderDeptList.value = list;
      } else {
        renderDeptList.value = departmentList.value;
      }
    };
    watch(deptSearchValue, (val) => {
      if (!val) {
        renderDeptList.value = departmentList.value;
      }
    });
    // 多选
    const deptSelectedKeys = ref();
    const deptSelectedRows = ref([]);
    const departmentRowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        deptSelectedKeys.value = selectedRowKeys;
        deptSelectedRows.value = selectedRows;
      },
    };

    /**
     * @description: 初始化
     */
    const init = () => {
      getColumnsData();
    };

    const initPersonList = () => {
      page.value = 1;
      getPersonList();
    };

    onActivated(() => {
      getDepartmentData();
    });

    init();

    /**
     * @description: 岗位
     */

    const isShowAddbtn = ref(false);
    onMounted(() => {
      getPostsList();
    });

    const formatTree = (tree) => {
      let result = [];
      tree.forEach((item) => {
        if (item.children && item.children.length > 0) {
          item.children = formatTree(item.children);
        } else {
          item.isLeaf = true;
        }
        result.push(item);
      });
      return result;
    };

    // 左侧岗位树
    const treeDataPosts = ref([]);
    const treeList = ref([]);
    const getPostsList = () => {
      request.get("/org", "/post/list", {}).then((res) => {
        treeDataPosts.value = utilsPosts.buildTree(res.list);
        treeDataPosts.value = formatTree(treeDataPosts.value);
        treeList.value = res.list;
        if (treeDataPosts.value) {
          const arr = [];
          treeDataPosts.value.findIndex((d, index) => {
            if (d.children) {
              arr.push(index);
            }
          });
          if (arr.length) {
            currentPost.value = treeDataPosts.value[arr[0]].children[0];
            treeSelectedKeysPosts.value = ["0-0-0"];
          } else {
            currentPost.value = treeDataPosts.value[0];
            treeSelectedKeysPosts.value = ["0-0"];
          }
          getUesrList();
        }
      });
    };
    const treeSelectedKeysPosts = ref(["0-0"]);
    const currentPost = ref();
    const onTreeSelectPosts = (keys, e) => {
      if (keys.length && keys[0].split("-").length == 2) {
        let treeObject = treeList.value.find(
            (item) => item.id == e.selectedNodes[0].id
        );
        if (!treeObject.children) {
          let id = treeObject.id;
          let name = treeObject.name;
          position.value.id = id;
          position.value.name = name;
          postsVisible.value = true;
        }
      }
      if (keys.length) {
        treeSelectedKeysPosts.value = keys;
        currentPost.value = e.node.dataRef;
        e.node.dataRef.parent_id != 0
            ? (isShowAddbtn.value = true)
            : (isShowAddbtn.value = false);
        if (isShowAddbtn.value) {
          getUesrList();
        }
      }
    };

    // 表格部分
    const postName = ref();
    watch(
        currentPost,
        (newVal, oldVal) => {
          if (newVal && newVal.parent_id == 0 && oldVal) {
            postName.value = oldVal.name;
            isShowAddbtn.value = false;
          } else if (!oldVal && newVal && newVal.parent_id == 0) {
            isShowAddbtn.value = false;
          } else {
            isShowAddbtn.value = true;
          }
        },
        {deep: true, immediate: true}
    );
    const dataSourcePosts = ref([]);
    const userSum = ref(0);
    const pagePost = ref(1);
    const limitPost = ref(10);
    const paginationPosts = computed(() => ({
      total: userSum.value,
      current: pagePost.value,
      pageSize: limitPost.value,
      showSizeChanger: true,
    }));
    const handleTableChangePosts = (pager) => {
      pagePost.value = pager.current;
      limitPost.value = pager.pageSize;
    };
    watch([pagePost, limitPost], () => {
      getUesrList();
    });
    const isRemove = computed(() => {
      let flag = false;
      if (
          memberSelectedKeysPosts.value &&
          memberSelectedKeysPosts.value.length
      ) {
        flag = false;
      } else {
        flag = true;
      }

      return flag;
    });
    const getUesrList = () => {
      if (currentPost.value && currentPost.value.id) {
        loading.value = true;
        request
            .get("/org", "/post/bind_user", {
              post_id: currentPost.value.id,
              page: pagePost.value,
              limit: limitPost.value,
            })
            .then((res) => {
              dataSourcePosts.value = res.list;
              if (dataSourcePosts.value) {
                dataSourcePosts.value.forEach((item) => {
                  item.positionName = res.detail.name;
                });
              }
              userSum.value = res.detail.user_count;
            })
            .finally(() => {
              loading.value = false;
            });
      }
    };
    const removePeople = (val) => {
      let uid_arr = [];
      if (typeof val == "number") {
        uid_arr.push(val);
      }
      if (typeof val == "object") {
        if (!memberSelectedKeysPosts.value) {
          message.warn("请选择要移除的成员！");
          return;
        }
        uid_arr = memberSelectedKeysPosts.value;
      }
      utils.modalConfirm({
        title: "确认删除",
        content: "该操作会将该成员移除岗位",
        okType: "danger",
        centered: true,
        onOk: () => {
          request
              .post("/org", "/post/unbind_user", {
                post_id: currentPost.value.id,
                uid_arr,
              })
              .then((res) => {
                message.success(res.msg || "解绑完成!");
                getUesrList();
              });
        },
      });
    };
    const memberSelectedKeysPosts = ref();
    const memberRowSelectionPosts = {
      onChange: (selectedRowKeys, selectedRows) => {
        const arr = [];
        selectedRows.forEach((item) => {
          arr.push(item.uid);
        });
        memberSelectedKeysPosts.value = arr;
      },
    };

    // 岗位组
    const postsGroupVisible = ref(false);
    const postsGroupId = ref(0);
    const postsGroupVal = ref();
    const addPostsGroup = (id, val) => {
      postsGroupId.value = id ? id : 0;
      postsGroupVal.value = val ? val : "";
      postsGroupVisible.value = true;
    };
    const closePostsGroup = (val) => {
      if (val == "submit") {
        getPostsList();
      }
      postsGroupVisible.value = false;
    };

    // 岗位
    const postsVisible = ref(false);
    const postsId = ref(0);
    const position = ref({
      id: null,
      name: "",
    });
    const addPosts = (val) => {
      if (treeDataPosts.value.length) {
        if (treeDataPosts.value.length && currentPost.value.parent_id == 0) {
          position.value.id = currentPost.value.id;
          position.value.name = currentPost.value.name;
          postsVisible.value = true;
        } else {
          request
              .get("/org", "/post", {id: currentPost.value.id})
              .then((res) => {
                position.value.id = res.detail.parent_id;
                position.value.name = res.detail.parent_name;
                postsVisible.value = true;
              });
        }

        postsId.value = val ? val : 0;
        // postsVisible.value = true;
      } else {
        message.warn("请先添加岗位组！");
        return;
      }
    };
    const closePosts = (val) => {
      if (val == "submit") {
        getPostsList();
      }
      postsVisible.value = false;
    };

    const delPostGroup = (id, name, parent_id) => {
      let content = "";
      if (parent_id == 0) {
        content = "注意岗位组删除后不可恢复";
      } else {
        content = "注意岗位删除后不可恢复";
      }
      utils.modalConfirm({
        title: "确认删除",
        content,
        okType: "danger",
        centered: true,
        onOk: () => {
          request.del("/org", "/post", {id, name}).then((res) => {
            message.success(res.msg || "删除成功！");
            getPostsList();
          });
        },
      });
    };

    // 添加成员
    const addMemberVisible = ref(false);
    const selectedUids = ref([]);
    const addMembers = () => {
      addMemberVisible.value = true;
    };
    const handleAddMemberClose = () => {
      addMemberVisible.value = false;
    };
    const handleAddMemberSuccess = (data) => {
      request
          .post("/org", "/post/bind_user", {
            post_id: currentPost.value.id,
            uid_arr: data.user,
          })
          .then((res) => {
            message.success(res.msg || "新增成员成功！");
            getUesrList();
            handleAddMemberClose();
          });
    };

    const getRecordType = (type) => {
      const result = TYPE_LIST.find((item) => item.value == type);
      return result ? result.text : "--";
    };

    // 导入成员
    const visibleImport = ref(false);
    // 导入成员结果
    const importUserResult = ref({});
    // 结果展示
    const userResultVisible = ref(false);

    const btnUserImport = () => {
      visibleImport.value = true;
    };

    const importSuccess = (data) => {
      visibleImport.value = false;
      // 刷新列表
      getDepartmentData();
      importUserResult.value = data;
      userResultVisible.value = true;
    };

    return {
      tabList,
      statusList,
      tabKey,
      onTabChange,
      treeSearchValue,
      showSearch,
      searchUserList,
      searchDeptList,
      onTreeSearch,
      treeData,
      departmentEditVisible,
      editDepartment,
      closeDepartmentEdit,
      memberEdit,
      memberDel,
      memberEditVisible,
      memberEditUid,
      memberEditType,
      closeMemberEdit,
      controlAccount,
      editSuccess,
      onTreeSelect,
      treeSelectedKeys,
      handleReslutDeptClick,
      currentDepartment,
      checkedStatus,
      handleStatusChange,
      columns,
      personList,
      goMemberApplyList,
      showDirectMember,
      colVisible,
      handleColVisibleChange,
      columnsData,
      colCheckAll,
      onCheckAllChange,
      onCheckItemChange,
      topKey,
      editDeptId,
      deptParentId,
      addSonDepartment,
      delDepartment,
      manageDepartment,
      departmentColumns,
      departmentRowSelection,
      departmentList,
      renderDeptList,
      deptSearchValue,
      onDepartmentSearch,
      memberRowSelection,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      pagination,
      handleTableChange,
      loading,
      resetColumns,
      buildingAuthVisible,
      closeBuildingAuth,
      buildingAuthEdit,
      treeDataPosts,
      treeSelectedKeysPosts,
      onTreeSelectPosts,
      currentPost,
      dataSourcePosts,
      columsPosts,
      postsGroupVisible,
      addPostsGroup,
      closePostsGroup,
      postsVisible,
      addPosts,
      closePosts,
      postsId,
      postsGroupId,
      postsGroupVal,
      delPostGroup,
      removePeople,
      addMemberVisible,
      selectedUids,
      addMembers,
      handleAddMemberClose,
      handleAddMemberSuccess,
      isShowAddbtn,
      getUesrList,
      memberSelectedKeysPosts,
      memberRowSelectionPosts,
      isRemove,
      userSum,
      position,
      paginationPosts,
      handleTableChangePosts,
      pagePost,
      limitPost,
      postName,
      getRecordType,
      memberEditAuth,
      memberAddVisible,
      memberAdd,
      visibleImport,
      btnUserImport,
      importSuccess,
      userResultVisible,
      importUserResult,
      leaveoffice,
      EmployeeID,
      Operationtype,
      closerefurbish,
    };
  },
});
const TYPE_LIST = [
  {text: "总公司", value: 0},
  {text: "区域分公司", value: 1},
  {text: "分公司", value: 2},
  {text: "管理处/项目部", value: 3},
  {text: "专业部门", value: 4},
  {text: "供应商", value: 5},
];
const tabList = [
  {key: "member", tab: "成员"},
  {key: "department", tab: "部门"},
  {key: "posts", tab: "岗位"},
];

const statusList = [
  {key: 4, title: "全部"},
  {key: 1, title: "正常"},
  {key: 3, title: "未激活"},
];

const departmentColumns = [
  {title: "部门名称", dataIndex: "title"},
  {
    title: "部门层级",
    dataIndex: "type",
    key: "type",
    filters: TYPE_LIST,
    onFilter: (value, record) => record.type == value,
  },
  {title: "部门人数", dataIndex: "total"},
  {
    title: "部门负责人",
    dataIndex: "leader",
    key: "leader",
  },
  {title: "操作", dataIndex: "id", key: "action"},
];

const columsPosts = [
  {
    title: "姓名",
    dataIndex: "realname",
    key: "realname",
  },
  {
    title: "电话",
    dataIndex: "phone",
    key: "phone",
  },
  {
    title: "岗位",
    dataIndex: "positionName",
    key: "position",
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "sex",
  },
  {
    title: "工号",
    dataIndex: "job_number",
    key: "job_number",
  },
  {
    title: "操作",
    dataIndex: "uid",
    key: "actions",
  },
];

const COL_RESET_TYPE = "autoOrgUserListColumn";
</script>

<style lang="less" scoped>
// @import "../../../common/styles/base.less";

#companyOrganization {
  height: 100%;
  background: #fff;

  &:deep(.ant-card-body) {
    height: calc(~"100% - 55px");
  }

  :deep(.ant-tree-node-content-wrapper) {
    display: flex;
    flex: 1;
  }

  :deep(.ant-tree-switcher-noop) {
    display: none;
  }

  :deep(.ant-tree-title) {
    flex: 1;
  }

  .layout {
    height: 100%;

    .sider {
      height: 100%;
      position: relative;

      .search-box {
        position: absolute;
        top: 0;
        left: 0;
        height: 40px;
        background: #fff;
        display: flex;
        align-items: center;
        z-index: 99;
      }

      .btns {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        z-index: 99;
      }

      :deep(.noSearch) {
        padding-top: 0px !important;
      }

      :deep(.tree) {
        padding: 40px 0 70px 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;

        &:deep(.ant-tree-node-content-wrapper) {
          width: 100%;
        }

        .title {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }

      .result {
        padding: 40px 0 70px 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;

        .result-title {
          height: 40px;
          line-height: 40px;
          vertical-align: middle;
          color: rgba(0, 0, 0, 0.6);
          background: #f7f7f7;
          padding: 0 10px;
        }

        .result-list {
          &:deep(.ant-list-item-meta) {
            align-items: center;
          }

          &:deep(.ant-list-item-action) {
            margin-left: 0;
          }

          &:deep(.ant-list-item-meta-description) {
            font-size: 12px;
            line-height: 20px;
          }

          .list-item {
            cursor: pointer;
            box-sizing: border-box;
          }

          .active {
            background: @primary-color-bg;
            color: @primary-color;
          }
        }
      }
    }

    .content {
      height: 100%;
      background: #fff;
      padding: 0 20px;
      border-left: 1px solid #f4f4f4;
      margin-left: 20px;

      .table-title {
        height: 32px;
        line-height: 32px;
        font-size: @font-size-subhead;
        color: #999;
      }

      .col-list {
        padding: 10px;
        background: #fff;
      }
    }

    .empty {
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emptyContent {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      // height: 100%;
      transform: translateY(-10%);

      .emptyTitle-h1 {
        font-size: 36px;
        font-weight: bolder;
        color: black;
        margin-bottom: 15px;
      }

      .emptyTitle-h3 {
        font-size: 20px;
        font-weight: 500;
        color: #272727;
        margin-bottom: 15px;
      }

      .emptyTitle-context {
        color: #8d8d8d;
        margin-bottom: 15px;
      }
    }
  }

  .in-member {
    :deep(.ant-card-body) {
      padding: 10px 24px 24px 24px;
      display: flex;
      flex-direction: column;
    }
  }
}

:deep(.ant-tabs-large > .ant-tabs-nav .ant-tabs-tab) {
  padding: 12px 16px;
}
</style>
